<template>
  <div class="menuList">
    <el-tabs type="border-card">
      <el-tab-pane label="指南列表">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="text-align: left">
            <div style="float:left">
              <i class="el-icon-s-check"></i>
              <span>比赛指南</span>
            </div>
            <el-button type="primary" style="float:right" @click="addCom">添加指南</el-button>
          </div>
          <el-table :data="competitionlist" style="width: 100%" height="640">
            <el-table-column prop="cid" label="指南id"></el-table-column>
            <el-table-column prop="title" label="指南标题"></el-table-column>
            <el-table-column prop="content" label="指南内容"></el-table-column>
            <el-table-column prop="create_time" label="创建时间" width="250"></el-table-column>
            <el-table-column fixed="right" label="操作" width="260" center>
              <template slot-scope="scope">
                <el-button
                  size="small"
                  @click="editCom(competitionlist[scope.$index].cid)"
                  type="primary"
                  plain
                >编辑</el-button>
                <el-button
                  type="info"
                  size="small"
                  plain
                  @click="lookCom(competitionlist[scope.$index].cid)"
                >查看</el-button>
                <el-button
                  @click.native.prevent="delCom(competitionlist[scope.$index].cid)"
                  type="danger"
                  size="small"
                  plain
                >移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="公告列表">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="text-align: left;">
            <div style="float:left">
              <i class="el-icon-platform-eleme"></i>
              <span>比赛公告</span>
            </div>
            <el-button type="primary" style="float:right" plain @click="addCam">添加公告</el-button>
          </div>

          <el-table :data="cannouncementlist" style="width: 100%" height="640">
            <el-table-column prop="competition_id" label="公告ID"></el-table-column>
            <el-table-column prop="competition_title" label="公告标题"></el-table-column>
            <el-table-column prop="competition_content" label="公告内容"></el-table-column>
            <el-table-column prop="create_time" label="时间" width="200"></el-table-column>
            <el-table-column fixed="right" label="操作" width="260" center>
              <template slot-scope="scope">
                <el-button
                  size="small"
                  @click="editCam(cannouncementlist[scope.$index].competition_id)"
                  type="primary"
                >编辑</el-button>
                <el-button
                  size="small"
                  type="info"
                  plain
                  @click="lookCam(cannouncementlist[scope.$index].competition_id)"
                >查看</el-button>
                <el-button
                  @click.native.prevent="delCam(cannouncementlist[scope.$index].competition_id)"
                  type="danger"
                  size="small"
                >移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <add-com @closeComAdd="closeComAdd" :addComShow="addComShow"></add-com>
    <add-cam @closeCamAdd="closeCamAdd" :addCamShow="addCamShow"></add-cam>
  </div>
</template>

<script>
import addCom from "@/share/alter/addCompetition";
import addCam from "@/share/alter/addCannouncemen";

export default {
  components: {
    addCam,
    addCom
  },
  data() {
    return {
      competitionlist: [], //比赛指南列表
      cannouncementlist: [], //赛事公告列表
      addCamShow: 0, //父子组件传值
      addComShow: 0 //指南
    };
  },
  mounted() {
    //比赛指南列表
    this.getCompetition();
    //赛事公告列表加载
    this.getCannouncement();
  },
  methods: {
    //比赛指南列表
    getCompetition() {
      var that = this;
      that.$axios
        .get("apis/admin/competitionlist")
        .then(function(res) {
          console.log("比赛指南列表", res);
          if (res.status == 200) {
            if (res.data.status == 1) {
              var dataLiat = res.data.data;
              for (var i = 0; i < dataLiat.length; i++) {
                dataLiat[i].create_time = that
                  .$moment(dataLiat[i].create_time)
                  .format("YYYY-MM-DD");
              }
              that.competitionlist = dataLiat;
            }
            console.log(that.cannouncementlist);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //赛事公告列表
    getCannouncement() {
      var that = this;
      that.$axios
        .get("apis/admin/cannouncementlist")
        .then(function(res) {
          console.log("赛事公告列表", res);
          if (res.status == 200) {
            if (res.data.status == 1) {
              var dataLiat = res.data.data;
              for (var i = 0; i < dataLiat.length; i++) {
                dataLiat[i].create_time = that
                  .$moment(dataLiat[i].create_time)
                  .format("YYYY-MM-DD");
              }
              that.cannouncementlist = dataLiat;
            }
            console.log(that.cannouncementlist);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //添加 指南
    addCom() {
      var addVal = {
        cid: "",
        title: "",
        content: ""
      };
      this.addComShow = [1, 0, addVal];
    },
    //修改指南
    editCom(id) {
      console.log(id);
      for (var i = 0; i < this.competitionlist.length; i++) {
        if (this.competitionlist[i].cid == id) {
          var editVal = this.competitionlist[i];
        }
      }
      this.addComShow = [1, 1, editVal];
    },
    //查看指南
    lookCom(id) {
      console.log(id);
      for (var i = 0; i < this.competitionlist.length; i++) {
        if (this.competitionlist[i].cid == id) {
          var editVal = this.competitionlist[i];
        }
      }
      this.addComShow = [1, 2, editVal];
    },
    //关闭指南修改和添加
    closeComAdd(msg) {
      console.log(msg);
      this.addComShow = msg;
      this.getCompetition();
      this.getCannouncement();
    },
    //删除比赛指南
    delCom(id) {
      var that = this;
      that.$axios
        .post(
          "apis/admin/delcompetition",
          this.$qs.stringify({
            cid: id //删除行的ID
          })
        )
        .then(function(res) {
          console.log(res);
          if (res.status == 200) {
            if (res.data.status == 1) {
              that.getCompetition();
              that.$message({
                message: "删除成功哦~",
                type: "success"
              });
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //添加 公告
    addCam() {
      var addVal = {
        competition_id: "",
        competition_title: "",
        competition_content: ""
      };
      this.addCamShow = [1, 0, addVal];
    },
    //修改公告
    editCam(id) {
      console.log(id);
      for (var i = 0; i < this.cannouncementlist.length; i++) {
        if (this.cannouncementlist[i].competition_id == id) {
          var editVal = this.cannouncementlist[i];
        }
      }
      this.addCamShow = [1, 1, editVal];
    },
    //查看指南
    lookCam(id) {
      console.log(id);
      for (var i = 0; i < this.cannouncementlist.length; i++) {
        if (this.cannouncementlist[i].competition_id == id) {
          var editVal = this.cannouncementlist[i];
        }
      }
      this.addCamShow = [1, 2, editVal];
    },
    //关闭公告修改和添加
    closeCamAdd(msg) {
      console.log(msg);
      this.addCamShow = msg;
    },
    //删除赛事公告
    delCam(id) {
      var that = this;
      that.$axios
        .post(
          "apis/admin/delcannouncement",
          this.$qs.stringify({
            competition_id: id //删除行的ID
          })
        )
        .then(function(res) {
          console.log(res);
          if (res.status == 200) {
            if (res.data.status == 1) {
              that.getCannouncement();
              that.$message({
                message: "删除成功哦~",
                type: "success"
              });
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
 
};
</script>

<style lang="less" scoped>
.menuList {
  height: 810px;
  .el-card {
    width: 100% !important;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 480px;
  }
}
</style>
